<link href="{{$core_js}}/flot/layout.css" rel="stylesheet" type="text/css"></link>
<script src="{{$core_js}}/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="{{$core_js}}/flot/jquery.flot.selection.js" type="text/javascript"></script>
<!--[if IE]><script src="{{$core_js}}/flot/excanvas.min.js"></script><![endif]-->

<style type="text/css">

.tickLabel
{
position: absolute;
top: 294px;
left: -5px;
width: 60px;
text-align: center;
}
</style>
<script type="text/javascript">

	$(function() {
		$("#datepicker").datepicker();
	});

	$(function() {
		var dates = $('#from, #to').datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function(selectedDate) {
				var option = this.id == "from" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});

  $(document).ready(function(){

    $('#event_start_date').datepicker({
			changeMonth: true,
			changeYear: true
		});
  });

  $(document).ready(function(){

    $('#event_end_date').datepicker({
			changeMonth: true,
			changeYear: true
		});
  });


</script>

<h1>Ecopoxy Systems Canada Website Statistics</h1>
<br>
<fieldset width="70%" align="center">
    <legend>Set Date Range</legend>
    <form method="post" action="{{$base_index_url}}/analytics/admin/stats/" />
    <table align="center">
        <tr>
            <div class="demo">
            <td width="40%">Start Date :</td>
            <td id="right" align=left><input id="event_start_date" name="start_date" type="text" value="{{$date_range->jquery->start}}" ></td>
            </div>
        <tr>
            <div class="demo">
            <td>End Date :</td>
            <td id="right" align=left><input id="event_end_date" name="end_date" type="text" value="{{$date_range->jquery->end}}" ></td>
            </div>
        </tr>
        <tr>
            <td>Search By :</td>
            <td id="right" align=left>
                            <select name="filter_by">
                              <option value=""></option>
                              <option value="day">Day</option>
                              <option value="month">Month</option>
                            </select>
            </td>
        </tr>
        <tr>
            <td><input id="submit" name="date_range" type="submit" value="Submit" >
            </td>
        </tr>
    </table>
    </form>
</fieldset>



<fieldset style="background-color: white">
    <legend>{{if $is_per_day}}Visits per Day{{else}}Visits per Month{{/if}}</legend>
<table>
    <tr>
        <td>
            <div id="placeholder" style="width:600px;height:300px;"></div>
            <div id="overview" style="margin-left:10px;margin-top:20px;width:600px;height:70px"></div>
        </td>
<script id="source">
$(function () {

    var d = JSON.parse('{{$page_views}}');
    var p = JSON.parse('{{$page_visits}}');

    var data_array = [{   label: "Page Views",
                          data: d },

                       {  label: "Visits",
                          data: p }];


    // helper for returning the weekends in a period
    function weekendAreas(axes) {
        var markings = [];
        var d = new Date(axes.xaxis.min);
        // go to the first Saturday
        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
        d.setUTCSeconds(0);
        d.setUTCMinutes(0);
        d.setUTCHours(0);
        var i = d.getTime();
        do {
            // when we don't set yaxis, the rectangle automatically
            // extends to infinity upwards and downwards
            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
            i += 7 * 24 * 60 * 60 * 1000;
        } while (i < axes.xaxis.max);

        return markings;
    }

    var options = {
        legend: {
                show: true,
                margin: 20,
                backgroundOpacity: 0.5
        },
        lines: { show: true },
        points: { show: true },
        xaxis: { mode: "time" },
        selection: { mode: "x" },
        grid: { markings: weekendAreas }
    };

    var plot = $.plot($("#placeholder"), data_array,options);

    var overview = $.plot($("#overview"), data_array, {
        series: {
            lines: { show: true, lineWidth: 1 },
            shadowSize: 0
        },
        xaxis: { ticks: [], mode: "time" },
        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
        selection: { mode: "x" }
    });


    // now connect the two

    $("#placeholder").bind("plotselected", function (event, ranges) {
        // do the zooming
        plot = $.plot($("#placeholder"), data_array,
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                      }));

        // don't fire event on the overview to prevent eternal loop
        overview.setSelection(ranges, true);
    });

    $("#overview").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });

});
</script>

        <td width="33%" valign="top" style="padding-top: 20px">
            <table>
                <tr>
                     <th align="left" width="150px">Total {{if $is_per_day }}Days{{else}}Month{{/if}}:</th>
                     <td>{{$ga->getTotalResults()}}</td>
                </tr>
                <tr>
                     <th align="left" width="150px">Total Pageviews</th>
                     <td>{{$ga->getPageviews()}}</td>
                </tr>
                <tr>
                     <th align="left" width="150px">Total Visits</th>
                     <td>{{$ga->getVisits()}}</td>
                </tr>
                <tr>
                     <th align="left" width="150px">Results Updated</th>
                     <td>{{$ga->getUpdated()}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</fieldset>

{{if $ga->getResults()}}
<fieldset>
    <legend>Stat Data</legend>
    <table class="display" width="100%" id="table">
        <thead>
            <tr valign="center" align="center">
                 {{if $is_per_day }}<th>Date</th>{{/if}}
                 <th>Month</th>
                 <th>Pageviews</th>
                 <th>Unique Page Views</th>
                 <th>Visits</th>
                 <th>New Visitors</th>
            </tr>
        </thead>
        <tbody>
        {{assign var="i" value=1}}
        {{foreach from=$ga->getResults() item=result}}
            <tr class="{{if $i%2 == 1}}odd {{else}}even{{/if}}">
                 {{if $is_per_day }}<td class="sorting_1">{{$result->getDay()}} </td>{{/if}}
                 <td>{{$result->getMonth()|replace:"$numeric_month":"$calender_month"}}, {{$result->getYear()}}</td>
                 <td>{{$result->getPageviews()}}</td>
                 <td>{{$result->getUniquePageviews()}}</td>
                 <td>{{$result->getVisits()}}</td>
                 <td>{{$result->getNewVisits()}}</td>
            </tr>
            <span style="display:none">{{$i++}}</span>
        {{/foreach}}
        </tbody>
    </table>
</fieldset>

{{/if}}
